<template>
  <dv-card class="mainPadding">
    <template #header>
      <div class="page-title">首页>152数字化改革</div>
    </template>
    <border-box>
      <dv-card
        :headerBg="require('@/assets/15bj/一体化智能化公共数据平台bj.png')"
        :style="{ gap: '10px' }"
      >
        <template #header>
          <dv-title1>一体化智能公共数据平台</dv-title1>
        </template>
        <two-layout gutter="12px" direction="row">
          <three-layout
            direction="column"
            :style="{ gridTemplateRows: '176px 288px auto' }"
          >
            <dv-card
              :card-bg="require('@/assets/15bj/两掌bj.png')"
              header-height="40px"
            >
              <template #header>
                <dv-title2>两掌</dv-title2>
              </template>
              <!--            todo-->
              <div>
                <Image
                  :src="require('@/assets/components/152/a1.png')"
                  width="410"
                ></Image>
              </div>
            </dv-card>
            <dv-card
              :card-bg="require('@/assets/15bj/应用支撑体系bj.png')"
              header-height="40px"
            >
              <template #header>
                <dv-title2>应用支撑体系</dv-title2>
              </template>
              <!--            todo-->
              <div>
                <Image
                  :src="require('@/assets/components/152/a2.png')"
                  width="410"
                ></Image>
                <radar
                  eleId="xdzl"
                  :background="false"
                  width="450"
                  height="200"
                  :color="['#00A1FF', '#5CE0E2']"
                  :round="false"
                  :area="false"
                  :legend="true"
                  :legendPosi="['bottom', 'center']"
                  :source="source"
                  :grid="{
                    left: '13%',
                    right: '6%',
                    top: '10%',
                    bottom: '25%',
                  }"
                />
              </div>
            </dv-card>
            <dv-card
              :card-bg="require('@/assets/15bj/基础设施体系bj.png')"
              header-height="40px"
            >
              <template #header>
                <dv-title2>基础设施体系</dv-title2>
              </template>
              <!--            todo-->
              <div>
                <Image
                  :src="require('@/assets/components/152/a3.png')"
                  width="400"
                ></Image>
                <radar
                  eleId="bar5"
                  width="450"
                  height="110"
                  :background="false"
                  :color="['#00A1FF', '#5CE0E2']"
                  :round="false"
                  :area="true"
                ></radar>
              </div>
            </dv-card>
          </three-layout>
          <dv-card
            :card-bg="require('@/assets/15bj/基础设施体系bj.png')"
            header-height="40px"
          >
            <template #header>
              <dv-title2>业务应用体系</dv-title2>
            </template>
            <!--            todo-->
            <div>
              <Image
                :src="require('@/assets/components/152/a4.png')"
                width="410"
              ></Image>
              <radar
                eleId="ywyy"
                remark="单位：%"
                :background="false"
                width="450"
                height="296"
                :color="['#00A1FF', '#5CE0E2']"
                :round="false"
                :legend="true"
                :source="ywyyData"
              ></radar>
              <Image
                :src="require('@/assets/components/152/a5.png')"
                width="410"
              ></Image>
            </div>
          </dv-card>
          <!--          <dv-card-->
          <!--            :card-bg="require('@/assets/15bj/数据资源体系bj.png')"-->
          <!--            header-height="40px"-->
          <!--          >-->
          <!--            <template #header>-->
          <!--              <dv-title2>数据资源体系</dv-title2>-->
          <!--            </template>-->
          <!--            &lt;!&ndash;            todo&ndash;&gt;-->
          <!--            <div>-->
          <!--              <Image-->
          <!--                :src="require('@/assets/components/152/a6.png')"-->
          <!--                width="410"-->
          <!--              ></Image>-->
          <!--              <Pie eleId="pie2" :source="pie2" width="430" height="236"></Pie>-->
          <!--              <Image-->
          <!--                :src="require('@/assets/components/152/a7.png')"-->
          <!--                width="410"-->
          <!--              ></Image>-->
          <!--              <Image-->
          <!--                :src="require('@/assets/components/152/a8.png')"-->
          <!--                width="410"-->
          <!--              ></Image>-->
          <!--            </div>-->
          <!--          </dv-card>-->
        </two-layout>
      </dv-card>
    </border-box>
  </dv-card>
</template>

<script>
import DvCard from "@/components/DvCard/index.vue";
import BorderBox from "@/components/BorderBox1/index.vue";
import DvTitle1 from "@/components/DvTitle1";
import ThreeLayout from "@/components/layout/ThreeLayout";
import DvTitle2 from "@/components/DvTitle2";
import Image from "@/components/Image";
import Radar from "@/components/charts/Bar";
import TwoLayout from "@/components/layout/TwoLayout";
export default {
  name: "Left",
  components: {
    DvTitle2,
    ThreeLayout,
    DvTitle1,
    BorderBox,
    DvCard,
    Image,
    Radar,
    TwoLayout,
  },
  data() {
    return {
      source: {
        name: ["6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        series: [
          // { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "男" },
          // { data: [32, 58, 64, 64, 64, 25], type: "bar", name: "女" },
          {
            data: [3, 2, 5, 3, 2, 1, 4],
            type: "line",
            name: "应用组件数",
            color: "#06B3D6",
          },
          {
            data: [2, 4, 2, 3, 1, 4, 5],
            type: "line",
            name: "智能化组件数",
            color: "#FFCC00",
          },
        ],
      },
      ywyyData: {
        name: ["6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        series: [
          { data: [32, 58, 64, 64, 64, 25, 52], type: "bar", name: "男" },
          { data: [32, 58, 64, 64, 64, 25, 52], type: "bar", name: "女" },
        ],
      },
      pie2: [
        { value: 24, name: "搭建专班1" },
        { value: 32, name: "搭建专班2" },
        { value: 29, name: "搭建专班3" },
        { value: 48, name: "搭建专班4" },
      ],
    };
  },
};
</script>

<style lang="scss" module>
// 覆盖样式

.contentPadding {
  padding: 15px 20px;
  background: linear-gradient(-90deg, rgba(0, 7, 58, 0.8), rgba(0, 7, 58, 0.8));
  opacity: 0.91;
}
</style>
